<template>
  <el-button type="primary" @click="myclick">导出word</el-button>
</template>
<script>
  import docxtemplater from 'docxtemplater'
  import PizZip from 'pizzip'
  import PizZipUtils from 'pizzip/utils/index.js'
  import JSZipUtils from 'jszip-utils'
  // import ImageModule from "docxtemplater-image-module-free"
  import {
    saveAs
  } from 'file-saver'
  import html2Canvas from 'html2canvas'

  import {
    exportWord
  } from './outword.js'

  function loadFile(url, callback) {
    PizZipUtils.getBinaryContent(url, callback)
  }
  export default {
    props: {
      saveData: {
        type: Object
      }
    },
    data() {
      return {
        dataList: {
          type: Object
        }

      };
    },

    methods: {
      myhtml2Canvas(id) {
        return html2Canvas(document.querySelector(`#${id}`), {
          allowTaint: true,
          taintTest: false,
          useCORS: true,
          dpi: window.devicePixelRatio * 1, //将分辨率提高到特定的DPI 提高四倍
          scale: 1 //按比例增加分辨率
        })
      },
      getMyBaseImg: async function(data) {
        var images = [];
        for (let i = 0; i < data.length; i++) {

          let id = 'myList' + i;
          let canvas = await this.myhtml2Canvas(id)
          let pageData = canvas.toDataURL('image/png', 1.0)
          images.push({
            "imgUrl": pageData
          })
          let id2 = 'mychart' + i;
          let canvas2 = await this.myhtml2Canvas(id2)
          let pageData2 = canvas2.toDataURL('image/png', 1.0)
          images.push({
            "imgUrl": pageData2
          })
        }
        let res = {
          "imglist": images
        };


        let imgSize = {
          //控制导出的word图片大小
          // imgurl:[592.28,841.89],
        };
        exportWord("/static/image-loop.docx", res, "outimge.docx", imgSize);
      },
      myclick() {
        this.getMyBaseImg(this.saveData);
      }
    }
  }
</script>
